<template>
  <view class="content">
    <!-- LOGO区域 -->
    <view class="logo-container">
      <image class="logo" src="/static/login/f.png"></image>
      <text class="logo-text">找回密码</text>
    </view>
    
    <view class="list">
      <view 
        class="list-call" 
        :class="{ focused: focusedInput === 'phone' }"
      >
        <image class="img" src="/static/login/1.png"></image>
        <input 
          class="sl-input" 
          type="number" 
          v-model="state.phone" 
          maxlength="11" 
          placeholder="请输入手机号" 
          @focus="focusInput('phone')"
          @blur="blurInput('phone')"
        />
      </view>
      <view 
        class="list-call" 
        :class="{ focused: focusedInput === 'password' }"
      >
        <image class="img" src="/static/login/2.png"></image>
        <input 
          class="sl-input" 
          type="text" 
          v-model="state.password" 
          maxlength="32" 
          placeholder="请输入新密码" 
          :password="!state.showPassword"
          @focus="focusInput('password')"
          @blur="blurInput('password')"
        />
        <image 
          class="img" 
          :src="state.showPassword ? '/static/login/op.png' : '/static/login/cl.png'" 
          @tap="display"
          @touchstart="animateIcon('password')"
          @touchend="stopAnimateIcon('password')"
        ></image>
      </view>
      <view 
        class="list-call" 
        :class="{ focused: focusedInput === 'code' }"
      >
        <image class="img" src="/static/login/3.png"></image>
        <input 
          class="sl-input" 
          type="number" 
          v-model="state.verifyCode" 
          maxlength="6" 
          placeholder="验证码" 
          @focus="focusInput('code')"
          @blur="blurInput('code')"
        />
        <view 
          class="yzm" 
          :class="{ yzms: state.second > 0, animated: animated }" 
          @tap="getcode"
          @touchstart="animateButton"
          @touchend="stopAnimateButton"
        >
          {{ yanzhengma }}
        </view>
      </view>
    </view>
    <view 
      class="button-login" 
      hover-class="button-active"
      @tap="bindLogin()"
    >
      <text>修改密码</text>
    </view>
  </view>
</template>

<script setup>
import { reactive, computed, onUnmounted, ref } from 'vue';
import { ApiForget ,ApiGetSSMCode} from '../api/user';

//数据
const state = reactive({
  phone: '',
  second: 0,
  verifyCode: '',
  showPassword: false,
  password: ''
});

const focusedInput = ref(null);
const animated = ref(false);
const animatedIcons = ref({
  password: false
});

const yanzhengma = computed(() => {
  if (state.second === 0) {
    return '获取验证码';
  } else {
    return state.second < 10 ? `重新获取0${state.second}` : `重新获取${state.second}`;
  }
});

const js = ref(null);

const display = () => {
  state.showPassword = !state.showPassword;
  animated.value = true;
  setTimeout(() => {
    animated.value = false;
  }, 300);
};

const focusInput = (inputType) => {
  focusedInput.value = inputType;
};

const blurInput = () => {
  focusedInput.value = null;
};

const clear = () => {
  if (js.value) {
    clearInterval(js.value);
    js.value = null;
  }
  state.second = 0;
};

const getcode = async() => {
  if (state.phone.length !== 11) {
    uni.showToast({
      icon: 'none',
      title: '手机号不正确'
    });
    return;
  }
  if (state.second > 0) {
    return;
  }
  animated.value = true;
  clear();
  state.second = 60;
  js.value = setInterval(() => {
    state.second--;
    if (state.second === 0) {
      clear();
    }
  }, 1000);
  await ApiGetSSMCode(state.value.phone)
}

const bindLogin = async() => {
  if (state.phone.length !== 11) {
    uni.showToast({
      icon: 'none',
      title: '手机号不正确'
    });
    return;
  }
  if (! /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(state.password)) {
    uni.showToast({
      icon: 'none',
      title: '密码必须是8-16位的字母和数字组合'
    });
    return;
  }
  if (state.code.length !== 4) {
    uni.showToast({
      icon: 'none',
      title: '验证码不正确'
    });
    return;
  }
   await ApiForget(state.value);
  //跳到登入界面
  uni.navigateTo({
  	url:"/pages/login/login"
  })
};

const animateIcon = (iconType) => {
  if (iconType === 'password') {
    animatedIcons.value.password = true;
  }
};

const stopAnimateIcon = (iconType) => {
  if (iconType === 'password') {
    animatedIcons.value.password = false;
  }
};

const animateButton = () => {
  animated.value = true;
};

const stopAnimateButton = () => {
  setTimeout(() => {
    animated.value = false;
  }, 300);
};

onUnmounted(() => {
  clear();
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50rpx;
}

/* LOGO区域样式 */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50rpx;
  position: relative;
  height: 250rpx;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-text {
  position: absolute;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  z-index: 10;
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 50rpx;
  padding-left: 70rpx;
  padding-right: 70rpx;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  border-bottom: 0.5px solid #e2e2e2;
  transition: all 0.3s ease;
}

.list-call.focused {
  border-bottom: 0.5px solid #43a0ff;
  box-shadow: 0 0 10rpx rgba(67, 160, 255, 0.3);
  transform: translateY(-2rpx);
}

.list-call .img {
  width: 40rpx;
  height: 40rpx;
  transition: all 0.3s ease;
}

.list-call.focused .img {
  transform: scale(1.2);
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
  transition: all 0.3s ease;
}

.list-call.focused .sl-input {
  color: #43a0ff;
}

.button-login {
  color: #ffffff;
  font-size: 34rpx;
  width: 470rpx;
  height: 100rpx;
  background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100rpx;
  transition: all 0.3s ease;
  transform: scale(1);
}

.button-login:active {
  transform: scale(0.98);
  background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.yzm {
  color: #ff7d13;
  font-size: 24rpx;
  line-height: 64rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  width: auto;
  height: 64rpx;
  border: 1rpx solid rgba(255, 131, 30, 1);
  border-radius: 50rpx;
  transition: all 0.3s ease;
}

.yzm.animated {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.yzms {
  color: #999999 !important;
  border: 1rpx solid #999999;
}
</style>